<style scoped>
  .player-info-wrap {
    display: flex;
    align-items: center;
    padding: 4vw;
  }

  .player-img {
    height: 17vw;
    width: 17vw;
    border-radius: 50%;
    border-width: .5vw;
    border-style: solid;
    border-color: #333;
    margin-right: 3vw;
  }

  .info-wrap {
    font-size: 5vw;
    word-break: break-all;
  }

  .player-info {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .player-info-name {
    margin-left: 3vw;
  }

  .info-desc {
    margin-top: 2vh;
    font-size: 3.5vw;
  }

  .player-nums-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: #333 0.5vw solid;
    border-bottom: #333 0.5vw solid;
    padding: 2vw;
  }

  .player-nums-item {
    text-align: center;
  }

  .player-nums-item-content {
    font-weight: bold;
    font-size: 4.5vw;
    margin-top: 1vh;
  }

  .gift-wrap {
    display: flex;
    padding: 4vw;
    flex-wrap: wrap;
    justify-content: center;
  }

  .gift-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30vw;
    box-sizing: border-box;
  }

  .gift-item-img {
    max-width: 20vw;
  }

  .protocal-wrap {
    font-size: 4vw;
    padding: 2vw;
  }

  .protocal-check-wrap {
    margin-top: 2vw;
    display: flex;
  }

  .wxpay-btn-wrap {
    padding: 4vw 15vw;
  }

  .btn-protocal {
    color: blueviolet;
  }

  .portocal-wrap {
    font-size: 4vw;
    background: white;
    width: 94vw;
    border-radius: 1vw;
    padding: 2vw;
  }

  .protocal-title {
    font-size: 4vw;
    text-align: center;
  }
  .gift-item-active {
    background: #fafafa;
    border: #e82e39 1px solid;
    border-radius: 2px;
  }
  .desc-wrap {
    text-align: center;
    color: #e82e39;
    margin-bottom: 1vh;
    font-weight: bold;
  }
</style>
<template>
  <div class="gift-content"
       :style="{color: (mainData.page.font_color+'!important'),background:mainData.page.background_color}"
       v-if="mainData!=null">
    <van-notice-bar color="#FF5151" background="#FFD8D8" :text="mainData.page.notice"
                    :left-icon="GLOBAL.getUrl('imgs/wap/icon_notice.png')"/>
    <div class="player-info-wrap" @click="toPlayer">
      <img class="player-img" :src="GLOBAL.getUrl(data.imgs[0],true)"/>
      <div class="player-info">
        <div >
          <div class="info-wrap">
            <span class="player-info-no">{{data.no}}号</span>
            <span class="player-info-name">{{data.player_name}}</span>
          </div>
          <div class="info-desc">给TA赞助吧</div>
        </div>
        <van-icon name="arrow" size="6vw"/>
      </div>
    </div>
    <div class="player-nums-info">
      <div class="player-nums-item">
        <div class="player-nums-item-title">编号</div>
        <div class="player-nums-item-content">{{data.no}}</div>
      </div>
      <div class="player-nums-item">
        <div class="player-nums-item-title">排名</div>
        <div class="player-nums-item-content">{{data.myRank}}</div>
      </div>
      <div class="player-nums-item">
        <div class="player-nums-item-title">票数</div>
        <div class="player-nums-item-content">{{data.total_vote_num}}</div>
      </div>
      <div class="player-nums-item">
        <div class="player-nums-item-title">热度</div>
        <div class="player-nums-item-content">{{data.view_num+data.dm_num}}</div>
      </div>
    </div>
    <div class="gift-wrap">
      <div class="gift-item" :class="select===index?'gift-item-active':''" @click="selected(index)"
           v-for="(item,index) in mainData.gift.gift_content" :key="index">
        <img class="gift-item-img" :src="GLOBAL.getUrl(item.img[0])">
        <div class="gift-item-name">{{item.name}}</div>
        <div class="gift-item-price" :style="{color: mainData.page.btn_color}">{{item.price+giftPrice[1]}}</div>
      </div>
    </div>
    <div class="desc-wrap">{{descContent}}</div>
    <div class="protocal-wrap">
      <div class="protocal-title">请选择以上赞助</div>
      <div class="protocal-check-wrap">
        <van-checkbox v-model="checked" :checked-color="mainData.page.btn_color"><span>我同意并已阅读<span @click="show =true"
                                                                                                    class="btn-protocal"
                                                                                                    @click.stop>《投票活动礼物赠送协议》</span></span>
        </van-checkbox>
      </div>
    </div>
    <div class="wxpay-btn-wrap">
      <van-button @click="pay" type="default" size="large" :loading="loading" :color="mainData.page.btn_color"
                  :style="{color:mainData.page.btn_font_color}">微信支付
      </van-button>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
        <div class="portocal-wrap">
          <div class="protocal-title">《投票活动礼物赠送协议》</div>
          <br>
          在参加本次投票活动投票之前，您应当事先阅读并同时遵守《投票礼物赠送协议》（以下简“本协议”），活动主办方将根据本协议及其相关协议和活动规则为您提供相关的服务及技术支撑。在此特别提醒，请您认真阅读并充分理解本协议中所有条款，尤其是其中涉及的礼物赠送原则。请您审慎阅读并选择是否接受本协议（未成年人应在监护人陪同下进行）。除非您接受本协议的所有条款，否则无权使用相关技术及服务，如您正在访问请立即停止所有相关操作。
          具体条款如下：
          <br>
          <br>
          1、为参赛者赠送礼物视为自愿、无偿赠予；
          <br>
          <br>
          2、所赠礼物仅用于选手增加相应票数人气；
          <br>
          <br>
          3、所赠礼物现金归活动主办方平台所有，用于活动的技术服务支撑；
          <br>
          <br>
          4、所赠礼物均为虚拟物品，购买支付后无法更换及退款；
          <br>
          <br>
          如不同意本协议，请务必立即停止使用送礼物功能，点击“同意”按钮后本协议立即生效，参与选手、投票人及活动主办方共同接受本协议约束。
        </div>

      </div>
    </van-overlay>
  </div>
</template>
<script>
  import { getActive } from '@/api/active'
  import { getPlayerById } from '@/api/play'
  import { createGift } from '@/api/gift'
  import { wxPay } from '@/api/pay'
  import { getActiveId } from '@/libs/util'

  export default {
    name: 'gift',
    data () {
      return {
        id: null,
        pid: null,
        descContent: ' ',
        data: null,
        show: false,
        select: -1,
        mainData: null,
        giftPrice: null,
        checked: false,
        loading: false
      }
    },
    created () {
      this.id = getActiveId();
      this.pid = this.$route.query.pid
      this.$wx.wxJssdkInit()
      this.initData()
    },
    methods: {
      initData () {
        try {
          let mainData = this.GLOBAL.getMainData()
          if (mainData == null || !mainData) {
            this.getData()
          } else {
            this.mainData = mainData
            this.setData()
            this.getDataById()
          }
        } catch (e) {
          this.getData()
        }
      },
      selected(index){
        this.select = index;
        let data = this.mainData.gift.gift_content[index];
        this.descContent = '支付'+data.price+'元,并为'+ this.mainData.apply.player_label+'送上'+data.vote_num+'票';
      },
      setData () {
        this.giftPrice = this.mainData.gift.gift_price.split(',')
      },
      getData () {
        let vm = this
        getActive(this.id).then(rep => {
          vm.mainData = rep.data.data
          vm.GLOBAL.setMainData(vm.mainData)
          vm.setData()
          vm.getDataById()
        })
      },
      getDataById () {
        let vm = this
        getPlayerById(this.pid, 1).then(rep => {
          vm.data = rep.data.data
        })
      },
      toPlayer () {
        this.$router.push({ name: 'player', query: { pid: this.pid } })
      },
      pay () {
        if (this.select === -1) {
          vant.Toast.fail('请选礼物')
          return
        }
        if (!this.checked) {
          vant.Toast.fail('请勾选协议')
          return
        }
        let data = this.mainData.gift.gift_content[this.select]
        vant.Toast.loading({
          message: '加载中...',
          forbidClick: true,
        })
        let vm = this
        data.aid = vm.id;
        data.pid = vm.pid;
        createGift(data).then(rep => {
          let id = rep.data.data
          wxPay(id, vm.GLOBAL.payConst.TYPE_TP_GIFT).then(rep => {
            let data = rep.data.data
            vm.toPay(data,id);
          }, error => {
            vant.Toast.clear()
            vant.Toast.fail('支付失败')
          })
        }, error => {
          vant.Toast.clear()
          vant.Toast.fail('支付失败')
        })
      },
      toPay (data, id) {
        let vm = this
        wx.chooseWXPay({
          appId: data.appId,
          timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: data.paySign, // 支付签名
          success: function (res) {
            vant.Toast.clear()
            vant.Toast.fail('支付成功')
            // 支付成功后的回调函数
            vm.$router.push({ name: 'pay-result', params: { id: id, type: vm.GLOBAL.payConst.TYPE_TP_GIFT } })
          },
          fail: function (res) {
            vant.Toast.clear()
            vant.Toast.fail('支付失败')
          }
        })
      }
    }
  }
</script>
